<template class="thisbody">
  <div class="container">
    <div class="data-container">
        <div class="land-message-container">
            <div class="title">
              <span class="title-dot"></span>
              <span class="title-text"> 地块信息 </span>
            </div>
            <div class="line"></div>
            <div class="land-mesage-list">
              <div class="land-list-item">
                <div class="image-container">
                  <img src="../assets/images/a173.png" alt="" class="item-img">
                </div>
                <div class="message-container">
                  <span class="name">地块数量</span>
                  <span class="data"> 5 <strong>个</strong></span>
                </div>
              </div>
              <div class="blank"></div>
              <div class="land-list-item">
                <div class="image-container">
                  <img src="../assets/images/a174.png" alt="" class="item-img">
                </div>
                <div class="message-container">
                  <span class="name">种植面积</span>
                  <span class="data"> 19 <strong>亩</strong></span>
                </div>
              </div>
              <div class="blank"></div>
              <div class="land-list-item">
                <div class="image-container">
                  <img src="../assets/images/a175.png" alt="" class="item-img">
                </div>
                <div class="message-container">
                  <span class="name">作物种类</span>
                  <span class="data"> 5 <strong>种</strong></span>
                </div>
              </div>
              <div class="blank"></div>
            </div>
        </div>
        <div class="crops-chart-container">
          <div class="title">
            <span class="title-dot"></span>
            <span class="title-text"> 农作物种植占比 </span>
          </div>
          <div class="line"></div>
          <div id="cropsType"></div>
        </div>
        <div class="land-chart-container">
          <div class="title">
            <span class="title-dot"></span>
            <span class="title-text"> 农地类型数量 </span>
          </div>
          <div class="line"></div>
          <div id="landType"></div>
        </div>
    </div>
    <div class="map-container">
    <!-- 右半边地图范围 -->
      <div class="map" id="map">
      </div>
      <div class="info">
        <h4 id="status"></h4><hr>
        <p id="result"></p>
      </div>
      </div>
      <div class="info" style="top: 9rem;">
        <h4>预报天气</h4><hr>
        <p id='forecast'></p>
      </div>

  </div>
</template>


<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import IconsDialog from './tool/build/IconsDialog.vue';

window._AMapSecurityConfig = {
  securityJsCode:"ba5d7f7c0345d91603cd4f80fb585c43",
};

export default {
  components: { IconsDialog },
  name: "Index",
  data() {
    return {
      //版本号
      version: "3.8.7",
      // 地图map对象
      map: undefined,
    };
  },
  mounted() {
    //数据渲染完成后执行
    this.initMap();
    this.echartCropsType();
    this.echartLandType();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    /**
     * 1.绘制卫星图
     * */
    initMap() {
      AMapLoader.load({
        key: "5654267437260b0b8b1c6547782fa529", //申请好的Web端开发者key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Geolocation",
          "AMap.Weather",
          "AMap.CitySearch",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          //JS API 加载完成后获取AMap对象
          var satellite = new AMap.TileLayer.Satellite();
          const map = new AMap.Map("map", {
            viewMode: '2D', //默认使用 2D 模式
            zoom: 15, //地图级别
            // center: locationArr.value, //地图中心点
            layers: [satellite],
            resizeEnable: true,
          });
          var city;
          AMap.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
              enableHighAccuracy: true,//是否使用高精度定位，默认:true
              timeout: 10000,          //超过10秒后停止定位，默认：5s
              position: 'RB',    //定位按钮的停靠位置
              offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
              zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition(function(status, result) {
              if (status == 'complete') {
                onComplete(result);
                console.log(
                  " ~ file: map-container.vue:88 ~ getGeolocation ~ result:",
                  result
                );
              } else {
                onError(result);
              }
            });
          });
          AMap.plugin('AMap.CitySearch', function(){
            var citySearch = new AMap.CitySearch();
            citySearch.getLocalCity(function (status, result) {
              if (status === "complete" && result.info === "OK") {
                console.log(
                  " ~ file: map-container.vue:88 ~ getCitySearch ~ result:",
                  result
                );
                // 查询成功，result即为当前所在城市信息
                loadWeather(result.city);
              }
            });
          });

          function loadWeather(city) {
            AMap.plugin('AMap.Weather', function() {
              var weather = new AMap.Weather();
              /*//查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
              weather.getLive(city, function(err, data) {
                if (!err) {
                  var str = [];
                  str.push('<h4 >实时天气' + '</h4><hr>');
                  str.push('<p>城市/区：' + data.city + '</p>');
                  str.push('<p>天气：' + data.weather + '</p>');
                  str.push('<p>温度：' + data.temperature + '℃</p>');
                  str.push('<p>风向：' + data.windDirection + '</p>');
                  str.push('<p>风力：' + data.windPower + ' 级</p>');
                  str.push('<p>空气湿度：' + data.humidity + '</p>');
                  str.push('<p>发布时间：' + data.reportTime + '</p>');
                  var marker = new AMap.Marker({map: map, position: map.getCenter()});
                  var infoWin = new AMap.InfoWindow({
                    content: '<div class="info" style="position:inherit;margin-bottom:0;">'+str.join('')+'</div><div class="sharp"></div>',
                    isCustom:true,
                    offset: new AMap.Pixel(0, -37)
                  });
                  infoWin.open(map, marker.getPosition());
                  marker.on('mouseover', function() {
                    infoWin.open(map, marker.getPosition());
                  });
                }
              });*/
              //未来4天天气预报
              weather.getForecast(city, function(err, data) {
                if (err) {return;}
                var str = [];
                for (var i = 0,dayWeather; i < data.forecasts.length; i++) {
                  dayWeather = data.forecasts[i];
                  str.push(dayWeather.date+' <span class="weather">'+dayWeather.dayWeather+'</span> '+ dayWeather.nightTemp + '~' + dayWeather.dayTemp + '℃');
                }
                document.getElementById('forecast').innerHTML = str.join('<br>');
              });
            });
          }

        });
    },
    echartCropsType() {
      var dom = document.getElementById('cropsType');
      var cropsChart = this.$echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var app = {};

      var option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '10%',
          left: 'right',
          orient: "vertical"
        },
        series: [
          {
            name: 'Types Num',
            type: 'pie',
            radius: ['50%', '90%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 148, name: '根茎类' },
              { value: 75, name: '叶菜类' },
              { value: 58, name: '瓜茄类' },
              { value: 44, name: '鲜豆类' },
              { value: 30, name: '花芽类' }
            ]
          }
        ]
      };

      if (option && typeof option === 'object') {
        cropsChart.setOption(option);
      }

      window.addEventListener('resize', cropsChart.resize);
    },
    echartLandType() {
      var dom = document.getElementById('landType');
      var myChart = this.$echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var option;

      option = {
        xAxis: {
          type: 'category',
          data: ['酸性土壤', '丘陵地带', '水培', '间作套种', '平原农田', '地膜覆盖', '温室大棚'],
          axisLabel: {
            //  formatter: '{value} 千 ',
            fontSize: 9,

          },
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              0,
              {
                value: 1,
                itemStyle: {
                  color: '#DA70D6'
                }
              },
              {
                value: 3,
                itemStyle: {
                  color: '#00CED1'
                }
              },
              {
                value: 3,
                itemStyle: {
                  color: '#FFB6C1'
                }
              },
              {
                value: 4,
                itemStyle: {
                  color: '#FAEBD7'
                }
              },
              {
                value: 3,
                itemStyle: {
                  color: '#87CEEB'
                }
              },
              {
                value: 5,
                itemStyle: {
                  color: '#66CDAA'
                }
              },
            ],
            type: 'bar'
          }
        ],
        grid: { // 设置网格属性
          left: '10%', // 左侧边距
          right: '4%', // 右侧边距
          bottom: '20%', // 底部边距
          top: '10%' // 顶部边距
        },
      };

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }

      window.addEventListener('resize', myChart.resize);
    },

  },
}

//解析定位结果
function onComplete(data) {
  document.getElementById('status').innerHTML='定位成功'
  // var marker = new AMap.Marker({map: map, position: data.position});
  var str = [];
  str.push('定位结果：' + data.position);
  str.push('定位类别：' + data.location_type);
  if(data.accuracy){
    str.push('精度：' + data.accuracy + ' 米');
  }//如为IP精确定位结果则没有精度信息
  str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));

  // document.getElementById('result').innerHTML = str.join('<br>');
}
//解析定位错误信息
function onError(data) {
  document.getElementById('status').innerHTML='定位失败'
  document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message+'</br>浏览器返回信息：'+data.originMessage;
}
</script>

<style>
html{
  font-size: 12px;
}
.thisbody {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
  font-weight: 300;
  color: #111213;
}
.container {
  display: flex;
  position:absolute;
  height: 100%;
  width: 100%;
  background: #f1f2f6;
}
.data-container{
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 97%;
  margin: 15px 0 15px 15px;
}
.land-message-container{
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  box-shadow: 0 0 60px #0000000a;
}
.title{
  flex: 3;
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-top: 6px;
  margin-bottom: 0px;
}
.title-dot{
  display: block;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 3px solid #08b586;
  filter: drop-shadow(0 1px 6px #08b58680);
  border-radius: 50%;
  margin: 12px 5px 12px 15px;
}
.title-text{
  display: block;
  font-family: "Source Han Sans CN Medium";
  font-weight: 500;
  font-size: 16px;
  text-align: left;
  color: #000;
  margin: 6px auto 12px 0;
}
.line{
  flex: 1;
}
.land-mesage-list{
  flex: 5;
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: 5px;
}
.land-list-item{
  flex: 20;
  display: flex;
  flex-direction: row;
}
.blank{
  flex: 1;
}
.image-container{
  flex: 2;
}
.message-container{
  flex: 3;
}
.land-list-item div{
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.item-img{
  width: 30px;
  height: 30px;
  background: transparent;
}
.name{
  font-family: "Source Han Sans CN";
  font-weight: 400;
  font-size:13px;
  text-align: left;
  color: #333;
}
.data{
  font-family: "DIN Medium";
  font-weight: 500;
  font-size: 13px;
  text-align: left;
  color: #08b586;
}
.data strong{
  font-family: "Source Han Sans CN Medium";
  font-weight: 500;
  font-size: 10px;
  text-align: left;
  color: #08b586;
}
.crops-chart-container{
  flex: 3;
  width: 100%;
  margin-top: 15px;
  background: #fff;
  box-shadow: 0 0 60px #0000000a;
}
#cropsType{
  flex: 5;
  width: 97%;
  height: 80%;
}
#landType{
  flex: 5;
  width: 97%;
  height: 80%;
}

.land-chart-container{
  flex: 3;
  width: 100%;
  margin-top: 15px;
  background: #fff;
  box-shadow: 0 0 60px #0000000a;
}
.map-container {

  flex: 1.6;
  height: 97%;
  margin: 15px;
  background: #fff;
  box-shadow: 0 0 60px #0000000a;
  align-content: center;
  justify-content: center;
}

.map {
  height: 97%;
  width: 97%;
  margin: 1.5%;
  padding: 0; /* 可根据需要自定义高度 */
  /* 其它地图样式 */
}
.info{
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: .25rem;
  position: fixed;
  top: 4rem;
  background-color: white;
  width: auto;
  min-width: 22rem;
  border-width: 0;
  right: 1rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
}
h4 {
  font-family: inherit;
  line-height: 1.8;
  font-weight: 300;
  color: inherit;
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: .5rem
}
p {
  margin-top: 0;
  margin-bottom: 0;
}
.weather{
  width:5rem;
  display:inline-block;
  padding-left:0.5rem;
}
.sharp{
  height: 1rem;
  width: 1rem;
  background-color: white;
  transform: rotateZ(45deg);
  box-shadow: 2px 2px 3px rgba(114, 124, 245, .5);
  position: inherit;
  margin-left: 10.5rem;
  margin-top: -6px;
}

</style>
